<template>
    <div class="page">
        <breadcrumb :isShow="false">
            <div class="cart-subtitle">
                <img src="../../assets/goods_icon.svg">
                <span class="middle">Information</span>
            </div>
        </breadcrumb>
        <div class="container cart-container-warpper">
            <div class="row">
                <div class="checkout-container col-sm-12 col-md-12 col-lg-12">
                    <div class="row col-md-12">
                        <a href="#">Already registered? Click here to login.</a>
                    </div>
                    <div class="row col-md-12">
                        <div class="onestepcheckout-container">
                            <billing></billing>
                            <shipping v-if="!showBilling"></shipping>
                            <div class="onestepcheckout-column-middle">
                                <shipping-method></shipping-method>
                                <payment-method></payment-method>
                                <payment-summary :items="list"></payment-summary>
                                <total :totalPrice="totalPrice" :shippingPrice="shipping_price" :couponCode="coupon_code" :couponCodeText="coupon_code_text"></total>
                                <ul class="checkout-types pull-right list-unstyled list-inline">
                                    <li>
                                        <button type="button" class="button btn submit-button-bg">
                                            <span>Place order now</span>
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import mixin from '../../mixin'
import api from '../../http'
import breadcrumb from '../../components/common/Breadcrumbs'
import billing from '../../components/FireCheckout/BillingFields'
import shipping from '../../components/FireCheckout/ShippingFields'
import shippingMethod from '../../components/FireCheckout/ShppingMethod'
import paymentMethod from '../../components/FireCheckout/PaymentMethod'
import paymentSummary from '../../components/FireCheckout/Summary'
import total from '../../components/Cart/Total' // 总价
export default {
    mixins: [mixin],
    data() {
        return {
            showBilling: true,
            shipping_price: 0,
            coupon_code: 1,
            coupon_code_text: '',
            list: []
        }
    },
    mounted() {
        api.GetCartItem().then(response => {
            this.shipping_price = response.data.shipping_price
            this.list = response.data.lists
        })
    },
    components: {
        breadcrumb,
        billing,
        shipping,
        shippingMethod,
        paymentMethod,
        paymentSummary,
        total
    },
    computed: {
        totalPrice() {
            return this.setTotal(this.list)
        }
    }
}
</script>
<style>
.cart-container {
    margin-bottom: 15px;
}

.checkout-container {
    padding: 50px 0;
}

.input-box {
    position: relative;
}

.input-s {
    color: #c00;
    position: absolute;
    top: 13px;
    left: 9px;
}

.input-box .input-text {
    width: 100%;
    height: 40px;
    padding-left: 10px;
    border: 1px #DBDBDB solid;
}

.checkbox {
    display: inline-block
}

.onestepcheckout-step-title {
    margin-bottom: 15px;
    border-bottom: 2px #222 solid;
    height: 50px;
    color: #222;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 50px
}

.onestepcheckout-step-title span {
    display: inline-block;
    overflow: hidden;
    margin-right: 8px;
    width: 17px;
    height: 17px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #222;
    color: #fff;
    vertical-align: text-top;
    text-align: center;
    line-height: 18px
}

.select-address-title {
    padding-top: 20px;
    font-weight: 700
}

#billing-address-select,
#shipping-address-select {
    display: none
}

.billing-shipping-address li {
    margin: 10px 0;
    padding: 22px 10px;
    border: 1px #D2D2D2 solid;
    color: #9b9b9b
}

.billing-shipping-address li input {
    position: relative;
    top: 2px
}

.billing-shipping-address li span:after,
.billing-shipping-address li span:before {
    position: relative;
    display: block;
    background: #A27F5A;
    content: ''
}

.billing-shipping-address li span:before {
    top: 10px;
    left: 0;
    width: 20px;
    height: 2px
}

.billing-shipping-address li span:after {
    top: -1px;
    left: 9px;
    width: 2px;
    height: 20px
}

.billing-shipping-address.open li span:after {
    width: 0
}

.billing-shipping-address li:last-child {
    border: 1px #C1A07E dashed;
    background: #F9F0EA;
    text-transform: uppercase
}

.billing-shipping-address li.on .checkout-method-box,
.billing-shipping-address li:last-child .checkout-method-box {
    color: #65589c
}

.checkout-address-list {
    margin-top: 10px
}

.checkout-address-list li {
    float: left;
    margin: 7px 0;
    width: 100%
}

.checkout-address-list li.last {
    padding: 5px 0
}


.checkout-address-list li.control label {
    position: inherit;
    font-weight: 700
}

.checkout-address-list label.on+input[type=email],
.checkout-address-list label.on+input[type=tel],
.checkout-address-list label.on+input[type=text] {
    padding-top: 15px
}

.checkout-address-list label.on+input[type=number] {
    padding-top: 6px
}

.checkout-address-list li.control,
.checkout-address-list li.no-display {
    margin: 0
}

.checkout-address-list li .input-box {
    float: left;
    position: relative;
}

.checkout-address-list li .input-box .checkout-tooltip {
    right: 1%;
    opacity: 1;
}

.checkout-address-list li .input-box .tooltip-inner {
    padding: 8px;
    background-color: #333;
    border: 1px solid #000;
    box-shadow: 0 0 5px #777, inset 0 1px 1px #777;
}

.checkout-address-list input.checkbox,
.input-different-shipping input.checkbox {
    position: relative;
    top: 2px
}

.checkout-address-list input.checkbox+label,
.input-different-shipping input.checkbox+label {
    position: initial;
    color: #999;
    text-decoration: underline;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px
}

.onestepcheckout-shipping-method-block li.item {
    margin-top: 10px;
    padding: 10px;
    border: 1px #D2D2D2 solid
}

.onestepcheckout-shipping-method-block li.item:first-child {
    margin-top: 15px
}

.checkout-inline-block {
    display: inline-block;
    vertical-align: middle
}

.checkout-method-box {
    padding-left: 10px;
    width: 95%;
    width: -webkit-calc(100% - 25px);
    width: -moz-calc(100% - 25px);
    width: calc(100% - 25px);
    color: #9b9b9b;
    font-size: 12px;
    line-height: 20px
}

.checkout-method-box label {
    display: block;
    margin-bottom: 0;
    cursor: pointer
}

.onestepcheckout-container li.on {
    border-color: #C9C9C9;
    background: #F7F7F7
}

.shipment-methods li.on .checkout-method-box {
    color: #222
}

.shipment-methods .method-title {
    padding-right: 20px
}

#checkout-payment-method-load li.item {
    padding: 20px 0;
    border-bottom: 1px #e1e1e1 solid
}

.checkout-payment-title input {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    vertical-align: top
}

.checkout-method-name {
    font-size: 14px;
    font-weight: bold;
}

.checkout-method-name span {
    padding-left: 10px;
    color: #e60044;
}

#shopping-cart-totals-table .grand-total td {
    color: #f41121;
    font-size: 20px
}

@media only screen and (max-width:767px) {
    #shipping_address_list .input-box.input-postcode .input-text,
    .checkout-address-list .input-box,
    .input-box.input-address1 .input-text,
    .input-box.input-city .input-text,
    .input-box.input-company .input-text,
    .input-box.input-firstname .input-text,
    .input-box.input-password-validate .input-text,
    .input-box.input-region .input-text,
    .input-box.input-region select,
    .input-box.input-telephone .input-text {
        width: 100%
    }

    .checkout-address-list li {
        margin: 0
    }

    .checkout-address-list .input-box {
        margin: 5px 0
    }
    .payment-img {
        margin-top: 10px
    }
}

.onestepcheckout-place-order {
    height: 45px;
    padding: 0 20px;
    min-width: 250px;
    font-size: 14px;
    text-transform: uppercase;
}

@media only screen and (min-width:768px) {
    .checkout-address-list {
        margin: 0 -1%;
    }
    .checkout-address-list li .input-box {
        width: 50%;
        padding: 0 1%;
    }
    .checkout-address-list .input-box.pl0 {
        padding-left: 0;
        padding-right: 1%;
    }
    .checkout-address-list .input-box.pr0 {
        padding-left: 1%;
        padding-right: 0;
    }

    .payment-img {
        position: relative;
        top: -31px;
        float: right
    }
}

@media only screen and (min-width:992px) {
    .onestepcheckout-summary .unit-price-header,
    .onestepcheckout-summary .quantity-header,
    .onestepcheckout-summary .subtotal-header,
    .onestepcheckout-summary .item-price,
    .onestepcheckout-summary .item-qty,
    .onestepcheckout-summary .item-total {
        width: 33.333%;
    }
}
</style>
